<!--
- File:    推荐码.
-->
<template>
  <div >
    <div class="recode_text">长按下面二维码保存图片或发送给朋友<br/>邀请成功后，当您的朋友购买商品时您将获得积分</div>
    <div id="qrcode_view" style="padding-bottom: 2.55rem">
      <img id="qr-view" src='' style="width:100%; height:auto;"/>
    </div>
    <div class="code_bg" id="bgimg" style=" margin-left:20rem;">
      <div class="Web_Box2">

        <!--头像-->
        <div class="code_head clear">
          <div class="codeimg"><img ref="" :src="memberInfo.member_avatar"></div>
          <div class=" textcode"><p>{{memberInfo.member_name}}</p>
            <p>为您推荐金品种子商城</p></div>
        </div>
        <!--头像 end-->
        <!--二维码-->

        <div class="mycode"><img ref="qr-img" :src="memberInfo.qrcode_image">
          <p class="erm">长按二维码点击识别二维码</p></div>
        <!--二维码 end-->
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
//  import * as request from '../../request'
  let html2canvas = require('html2canvas')
//  let avatar = require('../../assets/images/avatar.png')

  export default{
//    beforeRouteEnter (to, from, next) {
//      request.getMemberInfo().then(data => {
//        next(vm => {
//          if (!data.member_avatar || data.member_avatar == '') {
//            data.member_avatar = avatar
//          }
//          vm.memberInfo = data
//        })
//      }).catch(e => {
//        next()
//      })
//    },
    data() {
      return {
        memberInfo: this.$storage.getMemberInfo()
      }
    },
    components: {},
    mounted() {
//      this.getMemberInfo()
      setTimeout(() => {
        let bg = require('../../assets/images/erweim.png')
        Promise.all([this.$utils.imgLoaded(this.memberInfo.member_avatar), this.$utils.imgLoaded(this.memberInfo.qrcode_image), this.$utils.imgLoaded(bg)]).then(() => {
          console.log('三张图都加载成功')
          this.initCanvas()
        }).catch(e => {
          this.$toast('获取用户的二维码失败')
          console.log('有图片未加载完成', e)
          document.getElementById('bgimg').style.display = 'none'
        })
      }, 500)
    },
    methods: {
      initCanvas() {
        html2canvas(document.getElementById('bgimg'), {
          onrendered: function (canvas) {
            var imgData = canvas.toDataURL()
            document.getElementById('qr-view').src = imgData
            // console.log(imgData)
            document.getElementById('bgimg').style.display = 'none'
            // document.getElementById('qrcode_view').style.display = ''
          }
        })
      }
    }
  }
</script>

<style>

</style>